
//echart   
var mensesChart;
var gridX = 50;
var gridX2 = 10;
var gridY = 40;

var xAxisMin = -5;
var xAxisMax = 35;
var xAxisSplitNumber = 8;

var yAxisMargin = getYAxisMargin();

function getYAxisMargin(){
	var yAxisMargin = 2; //往 x = 0 处左移yAxisMargin px个单位.
	return yAxisMargin - getXAxisTickLength();
}

function getXAxisTickLength(){   	
    var xAxisLength = window.innerWidth - gridX - gridX2;
    var xAxisTickLength = xAxisLength / xAxisSplitNumber;
    
    return xAxisTickLength;
}

function setEChartConfig(){
						      require.config({
											  paths: {
												echarts: './js'
											  }
										    });
}

function drawMensesChart(){
	  	require(
		  [
			'echarts',
			'echarts/chart/bar',
		  ],
		  	  	  
		  function (ec) {
			mensesChart = ec.init(document.getElementById('mensesChart'));
			setMensesChartOption();		
		  });
}

function setMensesChartOption(){
    mensesChart.setOption({
        grid: {
            borderWidth: 0,
            x: gridX,
            x2: gridX2,
            y: gridY
        },
        xAxis: [{
            type: 'value',
            min: xAxisMin,
            max: xAxisMax,
            splitNumber: xAxisSplitNumber,
            axisLabel: {
			                textStyle: {
			                    			color: '#fd6969'
			                },
			                formatter: function(value) {
										                    if (parseInt(value) < 0) {
										                        return '日期   经期/周期';
										                    } else if (parseInt(value) == 0) {
										
															} else return value;
			                }
            },
            axisLine: {
                			show: false
            },
            axisTick: {
                			show: false
            },
            splitLine: {
			                lineStyle: {
			                    			color: '#E8E8E8'
			                }
            }

        }],
        yAxis: [{
            type: 'category',
            data: mensesChartLabelArray,
            axisLabel: { margin: yAxisMargin },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
			                lineStyle: {
			                    color: '#E8E8E8'
			                }
            }
        }],
        color: ['#feb2b2', '#fd6969'],
        series: [
        {
            type: 'bar',
            barGap: '-100%',
            barCategoryGap: '50%',
            itemStyle: {
			                normal: {
					                    label: {
							                        show: false,
							                        position: 'insideRight'
					                    }
			                }
            },
            data: mensesPeriodArray,
            clickable: false,          
            markLine: {
			                symbol: "none",
			                data: [{
					                    type: 'average',
					                    name: '平均值',
					                    itemStyle: {
								                        normal: {
										                            color: '#fd6969',
										                            lineStyle: { width: 2 }
								                        }
					                    }
					        }],
			                itemStyle: {
						                    normal: {
								                        label: {
										                            formatter: "平均周期\n{c}天",										                            
										                            textStyle: {
													                                color: '#606060',
													                                fontWeight: "bold"
										                            }
								                        }
						                    }
			                }
            }
        },
        {
            type: 'bar',
            itemStyle: {
			                normal: {
					                    label: {
							                        show: false,
							                        position: 'insideRight'
					                    }
			                }
            },
            data: mensesDurationArray,
            markLine: {
                symbol: "none",
                data: [{
		                    type: 'average',
		                    name: '平均值',
		                    itemStyle: {
					                        normal: {
					                            color: '#fd6969',
					                            lineStyle: { width: 2 }
					                        }
		                    }
                }],
                itemStyle: {
			                    normal: {
			                        label: {
					                            formatter: "平均经期\n{c}天",
					                            textStyle: {
								                                color: '#606060',
								                                fontWeight: "bold"
					                            }
			                        }
			                    }
                }
            }
        }]
    });
}